<template>
  <view class="taxi">
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      scale="14"
      :show-location="true"
      @regionchange="regionchange"
      @markertap="markertap"
      style="width: 100vw; height: 100vh"
    >
      <view class="return">
        <image
          src="../images/current-location.png"
          style="width: 30px; height: 30px"
          @tap="toCurrent"
        ></image>
      </view>
      <!-- 接到乘客前 -->
      <view class="container" v-show="status == 0">
        <view class="from">
          <image src="../images/circle.png" style="width: 24px; height: 24px" />
          <text style="padding-left: 10px">{{ startPlace.name }}</text>
        </view>
        <view class="to">
          <image
            src="../images/toplace.png"
            style="width: 24px; height: 24px"
          />
          <text style="padding-left: 10px">{{ endPlace.name }}</text>
        </view>
        <view class="predict">预估收益：16元</view>
        <view class="confirm">
          <button class="btn" @tap="pickUp">到达目的地</button>
        </view>
      </view>
    </map>
  </view>
</template>
<script>
import "./taxi.less";
import Taro from "@tarojs/taro";
import { baseUrl } from "../../utils/baseurl";
import {
  set as setGlobalData,
  get as getGlobalData,
} from "../../utils/global_data";
export default {
  data() {
    return {
      status: 0,
      latitude: 23.099994,
      longitude: 113.32452,
      startPlace: {
        address: "起点",
        name: "起点",
        latitude: 0,
        longitude: 0,
      },
      endPlace: {
        address: "终点",
        name: "终点",
        latitude: 0,
        longitude: 0,
      },
    };
  },
  onLoad() {
    const eventChannel =
      Taro.getCurrentPages()[
        Taro.getCurrentPages().length - 1
      ].getOpenerEventChannel();
    eventChannel.on("acceptDataFromOpenerPage", (data) => {
      console.log("data", data);
      this.$set(this.startPlace, "name", data.data.begin);
      this.$set(this.endPlace, "name", data.data.end);
    });
    this.toCurrent();
  },
  methods: {
    // 移动区域 type: begin/end
    regionchange(e) {
      console.log(e.type);
    },
    // 点击标记点
    markertap(e) {
      console.log("markertap:", e.detail.markerId);
    },
    // 回到当前所在地点
    toCurrent() {
      var that = this;
      Taro.getLocation({
        type: "wgs84",
        success(res) {
          that.latitude = res.latitude;
          that.longitude = res.longitude;
        },
      });
    },
    pickUp() {
      console.log("到达目的地");
      const userInfo = getGlobalData("userInfo");
      Taro.request({
        url: baseUrl.platform + "travel/order/complete",
        method: "POST",
        data: {
          driverId: userInfo.pkId,
        },
      }).then((res) => {
        console.log(res.data);
        Taro.showToast({
          title: "订单完成",
          icon: "success",
          duration: 2000,
        });
        Taro.request({
          url:
            baseUrl.driver +
            'travel/driver/stop',
          method: "POST",
          data: {
            account: userInfo.pkId,
          },
        });
        Taro.redirectTo({ url: "/pages/index/index" });
      });
    },
  },
};
</script>